<template>
    <el-container>
      <!-- 主内容区域 -->
      <el-main class="main-content">
        <!-- 筛选条件行 -->
        <el-row :gutter="20" class="filter-row">
          <!-- 车型选择 -->
          <el-col  :span="3">
            <el-select
              v-model="selectedModel"
              placeholder="选择车型"
              class="select"
            >
              <el-option
                v-for="item in models"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
          </el-col>

          <!-- 日期选择 -->
          <el-col :span="4">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="date-picker"
              unlink-panels
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="2">
            <el-button @click="handleFilterChange">查询</el-button>
          </el-col>
        </el-row>

        <!-- 图表容器 -->
        <div ref="faultChart" class="chart-container"></div>
      </el-main>
    </el-container>

</template>

<script>

import * as echarts from 'echarts';
export default {
  data() {
    return {
      selectedModel: '',
      dateRange: '',
      models: [
        { value: 'HX01', label: 'HX01 - 经济型' },
        { value: 'HX02', label: 'HX02 - 舒适型' },
        { value: 'HX03', label: 'HX03 - 高端型' }
      ],
      chart: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  mounted() {
    // 初始化图表
    this.chart = echarts.init(this.$refs.faultChart);
    // 绑定窗口调整事件以自适应图表大小
    window.addEventListener('resize', this.resizeChart);
    // 获取数据
    this.fetchData();
  },
  beforeDestroy() {
    // 移除窗口调整事件监听
    window.removeEventListener('resize', this.resizeChart);
    // 销毁图表实例
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    fetchData() {
      // 模拟异步数据获取
      this.simulateDataFetch()
        .then(mockData => {
          this.updateChartData(mockData);
        })
        .catch(error => {
          console.error('数据获取失败:', error);
          this.$message.error('数据加载失败，请稍后重试');
        });
    },
    simulateDataFetch() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟不同车型和日期范围的数据
          const mockData = {
            categories: ['S轴中间电压低报警', 'B轴中间电压高报警', '其他故障','S轴中间电压低报警', 'B轴中间电压高报警', '其他故障','S轴中间电压低报警', 'B轴中间电压高报警', '其他故障'],
            data: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100),Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100),Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)]
          };
          resolve(mockData);
        }, 1000); // 模拟1秒延迟
      });
    },
    updateChartData(data) {
      const options = {
        title: {
          text: '故障统计',
          left: 'center',
          textStyle: {
            fontSize: 24,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.categories,
          axisLabel: {
            fontSize: 16,
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 16,
            color: '#666'
          }
        },
        series: [{
          name: '故障次数',
          type: 'bar',
          data: data.data,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          },
          barWidth: '50%',
          label: {
            show: true,
            position: 'top',
            fontSize: 16,
            color: '#333',
            formatter: '{c}'
          }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      };

      this.chart.setOption(options);
    },
    handleFilterChange() {
      this.fetchData();
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #409EFF;
  color: white;
  text-align: center;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.main-content {
  padding: 20px;
}

.filter-row {
  margin-bottom: 20px;
}

.select,
.date-picker {
  width: 100%;
}

.chart-container {
  width: 100%;
  height: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
  }

  .el-col {
    margin-bottom: 10px;
  }
}
</style>
